<template>
  <view>
    <l-background has-sub-background />
    <view class="padding-30">
      <view class="card">
        <basic-info-model :data="carInfo" :type-id="carInfo.typeId" :driver-name="driverName" show-type="detail" disabled show />
      </view>

      <view class="card margin-top-16">
        <new-image-model :data="carInfo" disabled :list="documentsList" />
      </view>

      <view class="card margin-top-16">
        <identity-info-model :data="carInfo" :must="false" disabled show-type="detail" :status="0" />
      </view>

      <view class="card margin-top-16">
        <transport-info-model :degree-label="degreeLabel || '暂无'" show-type="detail" :data="carInfo" :must="false" disabled />
      </view>

      <view class="card margin-top-16">
        <new-image-model :data="carInfo" disabled :list="insuranceList" />
      </view>

      <view class="card margin-top-16">
        <insurance-info-model :data="carInfo" :must="false" disabled />
      </view>

      <view v-if="carPic.length" class="card margin-top-16">
        <vehicle-photos-model :photo="carInfo.photo" :data="carInfo" :status="1" :car-pic="carPic" />
      </view>
    </view>
  </view>
</template>

<script>
import BasicInfoModel from '../components/basic-info-model/basic-info-model'
import IdentityInfoModel from '../components/identity-info-model/identity-info-model'
import TransportInfoModel from '../components/transport-info-model/transport-info-model'
import InsuranceInfoModel from '../components/insurance-info-model/insurance-info-model'
import VehiclePhotosModel from '../components/vehicle-photos-model/vehicle-photos-model'
import { getCarDetail } from '../api'
import { carDegreeList } from '../index'

export default {
  name: 'VehicleDetail',
  components: {
    BasicInfoModel,
    IdentityInfoModel,
    TransportInfoModel,
    InsuranceInfoModel,
    VehiclePhotosModel
  },
  data() {
    return {
      carInfo: {
        vlicencePicture: '',
        bizPicture: '',
        compulsoryInsPic: '',
        carrierInsPic: '',
        commerceInsPic: ''
      },
      driverName: '',
      degreeLabel: '',
      carId: '',
      carPic: [],
      showList: ['brandModel', 'useType', 'bizDate', 'bizExp', 'compulsoryInsExp', 'carrierInsExp', 'commerceInsExp'],
      documentsList: [
        { attr: 'vlicencePicture', label: '行驶证', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/singshizheng.png', example: 'true' },
        { attr: 'bizPicture', label: '道路运输证', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb-portal/static/zigezheng.png', example: 'true' }
      ],
      insuranceList: [
        { attr: 'compulsoryInsPic', label: '交强险保险单', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/baoxian.png' },
        { attr: 'carrierInsPic', label: '承运人险保险单', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/baoxian.png' },
        { attr: 'commerceInsPic', label: '商业险保险单', default: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/baoxian.png' }
      ]
    }
  },
  onLoad(e) {
    this.carId = e.id
    this.getCarInfo()
  },
  methods: {
    // 获取车辆相关详情
    async getCarInfo() {
      const [err, res] = await getCarDetail(this.carId)
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      this.carInfo = data
      this.driverName = data.driverNickName || '暂无'
      if (this.carInfo.photo) {
        this.carPic = this.carInfo.photo.split(',')
      }
      this.carInfo.vlicenceDxp = data.vlicenceExp
      this.carInfo.fuelType = data.fuelType
      carDegreeList.forEach(item => {
        if (item.value === this.carInfo.autoClass) this.degreeLabel = item.label
      })
      Object.keys(this.carInfo).forEach(key => {
        if (!this.carInfo[key] && this.carInfo[key] !== 0 && key !== 'commerceInsPic') this.carInfo[key] = '暂无'
      })
      this.showList.forEach(item => {
        if (!this.carInfo[item]) this.carInfo[item] = '暂无'
      })
    }
  }
}
</script>

<style scoped>

</style>
